<template>
  <el-form
    :model="queryParams"
    ref="queryForm"
    label-width="100px"
    class="query-panel"
  >
    <!-- 动态生成表单项 -->
    <el-row :gutter="20">
      <!-- 表单项 -->
      <el-col v-for="(condition, index) in conditions" :key="index" :span="6">
        <el-form-item :label="condition.label">
          <component
            :is="condition.component"
            v-model="queryParams[condition.prop]"
            v-bind="condition.props"
          ></component>
        </el-form-item>
      </el-col>

      <!-- 如果当前行不足 4 个表单项，填充空列 -->
      <el-col
        v-for="i in emptyColsCount"
        :key="`empty-${i}`"
        :span="6"
      ></el-col>
      <!-- 查询和重置按钮 -->
      <!-- 动态计算按钮的位置 -->
      <el-col :span="6">
        <div class="query-btns">
          <el-button @click="handleReset">重置</el-button>
          <el-button type="primary" @click="handleQuery">查询</el-button>
        </div>
      </el-col>
    </el-row>
  </el-form>
</template>
  
  <script setup lang="ts">
import { ref, reactive, computed } from "vue";

interface Condition {
  label: string;
  prop: string;
  component: string;
  props: Record<string, any>;
  options?: Array<{ label: string; value: string }>;
}

const queryForm = ref(null);

// 查询条件配置
const conditions: Condition[] = [
  {
    label: "姓名",
    prop: "username",
    component: "el-input",
    props: { placeholder: "请输入用户名" },
  },
  {
    label: "状态",
    prop: "status",
    component: "el-select",
    props: { placeholder: "请选择状态" },
    options: [
      { label: "启用", value: "1" },
      { label: "禁用", value: "0" },
    ],
  },
  {
    label: "创建时间",
    prop: "createTime",
    component: "el-date-picker",
    props: {
      type: "daterange",
      rangeSeparator: "至",
      startPlaceholder: "开始日期",
      endPlaceholder: "结束日期",
    },
  },
  {
    label: "邮箱",
    prop: "email",
    component: "el-input",
    props: { placeholder: "请输入邮箱" },
  },
  {
    label: "所属单位",
    prop: "role",
    component: "el-select",
    props: { placeholder: "请选择单位" },
    options: [
      { label: "组织1", value: "admin" },
      { label: "组织2", value: "user" },
    ],
  },
];

// 查询参数
const queryParams = reactive({
  username: "",
  status: "",
  createTime: [],
  email: "",
  role: "",
});

// 计算需要填充的空列数量
const emptyColsCount = computed(() => {
  const totalItems = conditions.length + 1; // 查询条件 + 按钮
  const remaining = totalItems % 4; // 计算剩余的空间
  return remaining === 0 ? 0 : 4 - remaining; // 如果剩余为 0，不需要填充；否则填充空列
});

// 查询操作
const handleQuery = () => {
  console.log("查询参数:", queryParams);
  // 触发父组件的查询方法
};

// 重置操作
const handleReset = () => {
  Object.keys(queryParams).forEach((key) => {
    queryParams[key] = "";
  });
  queryParams.createTime = [];
  // 触发父组件的重置方法
};
</script>
  
  <style scoped>
.query-panel {
  padding: 16px;
  padding-bottom: 0;
  background-color: #f5f7fa;
  border-radius: 4px;
}
.query-btns {
  display: flex;
  justify-content: flex-end;
}
:deep(.el-form-item) {
  margin-bottom: 16;
}
</style>